<template>
  <div class="UserMemberList">
    <h3>学生信息列表</h3>
    <div class="input_box">
      <span class="querySpans">查询条件：</span>
      <el-select
        filterable
        v-model="selectData.classId"
        placeholder="班级"
        clearable
        size="small"
      >
        <el-option v-for="item in classList" :label="item.name" :key="item.id" :value="item.id"></el-option>
      </el-select>
      <el-input v-model="selectData.name" placeholder="学生姓名" size="small"></el-input>
      <el-button class="selectBtn" size="small" @click="getList(1,page_option.page_size)">查询</el-button>
      <el-button class="resetBtn" size="small" @click="reset()">重置</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border style="width: 100%;text-align:center" size="small"
                >
        <el-table-column prop="id" label="ID" min-width="60" fixed></el-table-column>
        <el-table-column prop="userName" label="学生姓名" min-width="120"></el-table-column>
        <el-table-column prop="account" label="账号" min-width="150"></el-table-column>
        <el-table-column prop="className" label="班级" min-width="150"></el-table-column>
        <el-table-column prop="userNumber" label="学号" min-width="150"></el-table-column>
        <el-table-column label="性别" min-width="150">
          <template v-slot="scope">
            {{ scope.row.sex===1?"男":"女" }}
          </template>
        </el-table-column>
        <el-table-column label="入学时间" min-width="150">
          <template v-slot="scope">
            {{ scope.row.admissionTime | formatTime }}
          </template>
        </el-table-column>
        <el-table-column prop="identityCard" label="身份证号" min-width="150"></el-table-column>
        <el-table-column prop="address" label="现居住地" min-width="150"></el-table-column>
        <el-table-column prop="idEntityCardAddress" label="身份证所在地" min-width="150"></el-table-column>
        <el-table-column prop="phone" label="手机号" min-width="120"></el-table-column>
        <el-table-column prop="" label="创建时间" min-width="150">
          <template v-slot="scope">
            {{ scope.row.createTime | formatTime }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="170">
          <template v-slot="scope">
            <el-button @click="handleResetPassword(scope.row)" style="background-color:#008a96;color:#fff" size="mini">
              重置密码
            </el-button>
            <el-button @click="handleEdit(scope.row)" style="background-color:#ea7c5a;color:#fff" size="mini">编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page_option.current_page"
          :page-sizes="[15, 20, 30, 50]"
          :page-size="page_option.page_size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page_option.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      classList:[],
      selectData: {
        classId:"",
        name: ""
      },
      tableData: [],
      page_option: {
        current_page: 1,
        page_size: 15,
        total: 0
      }
    };
  },
  computed: {
    tableSize() {
      return this.$store.getters.tableSize;
    }
  },
  mounted() {
    this.getClassList()
    this.getList(1,this.page_option.page_size)
  },
  methods: {
    getClassList() {
      this.$api.education.classList({
        pageNum: 1,
        pageSize: 100
      }).then((res) => {
        if (res.code === 200) {
          console.log(res);
          this.classList = res.data.list;
        }
      });
    },
    //重置查询条件
    reset() {
      this.selectData = {
        classId:"",
        name: ""
      };
      this.page_option.current_page = 1;
      this.page_option.page_size = 15;
      this.getList(1, 15);
    },
    //获取表格数据,current（当前页）、size（一页显示几条数据）两个参数
    getList(pageNum, pageSize) {
      let params = {
        pageNum: pageNum,
        pageSize:pageSize,
        classId: this.selectData.classId, //用户班级id
        name: this.selectData.name
      };
      this.$api.studentInfo.getStudentInformationList(params)
      .then((res)=>{
         this.tableData = res.data.list;
         this.page_option.total = res.data.total;
      })
    },
    handleSizeChange(size) {
      console.log(size);
      this.page_option.page_size = size;
      this.page_option.current_page = 1;
      this.getList(
        1,
        this.page_option.page_size
      );
    },
    handleCurrentChange(current) {
      this.page_option.current_page = current;
      this.getList(
        this.page_option.current_page,
        this.page_option.page_size
      );
    },
    // 更改开启状态
    handleResetPassword(row) {
      const h = this.$createElement;
      this.$msgbox({
        title: "提示",
        message: h("p", null, [
          h("span", null, "你真的重置 "),
          h("span", { style: "color: red" }, row.userName),
          h("span", null, "的密码吗？ ")
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.studentInfo.resetPassword(row.id)
        .then((res)=>{
           this.$message.success("已重置密码")
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消"
        });
      });
    },
    //修改
    handleEdit(row) {
      this.$router.push({path:"/studentInfo/member/edit",query:{id:row.id,userNumber:row.userNumber}});
      // sessionStorage.setItem("studentInfo",JSON.stringify(row));
    },
    //添加用户
    addAdministrator() {
      this.$router.push({ name: "member_add" });
    },
    option() {
      return {
        userId: "", lockState: "", phone: ""
      };
    }
  }
};
</script>
<style scoped>
@import url('./list.css');
</style>
